<template>
    <el-container>
        <!-- 头部 -->
        <el-header>
            <!-- 左部分 -->
            <div class="left">
                <img class="logo" src="./imgs/logo.jpg" alt="" />
                <span class="title">{{ $t('header.title') }}</span>
            </div>
            <!-- 右部分 -->
            <div class="right">
                <!-- 多语言下拉菜单 -->
                <el-dropdown @command="handleCommand">
                    <span class="el-dropdown-link">
                        {{ $t('header.manyLanguage')
                        }}<i
                            class="el-icon-arrow-down el-icon-caret-bottom"
                        ></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item command="zh">{{
                            $t('header.chinese')
                        }}</el-dropdown-item>
                        <el-dropdown-item command="en">{{
                            $t('header.english')
                        }}</el-dropdown-item>
                        <el-dropdown-item command="ja">{{
                            $t('header.japanese')
                        }}</el-dropdown-item>
                        <el-dropdown-item command="ko">{{
                            $t('header.korean')
                        }}</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
                <!-- 退出按钮 -->
                <el-button
                    type="success"
                    title="退出"
                    v-on:click="loginOut"
                    icon="el-icon-s-promotion"
                    plain
                    >{{ $t('header.quit') }}</el-button
                >
            </div>
        </el-header>
        <!-- 页面主体内容 -->
        <el-container>
            <!-- 左侧边栏 -->
            <el-aside :style="{ width: isCollapse ? '65px' : '200px' }">
                <!-- 是否折叠导航 -->
                <div class="collapse" @click="isCollapse = !isCollapse">
                    | | |
                </div>
                <!-- 导航菜单 -->
                <el-menu
                    :router="true"
                    :default-active="activePath"
                    class="el-menu-vertical-demo"
                    background-color="#354758"
                    text-color="#fff"
                    active-text-color="rgb(66, 185, 131)"
                    :collapse="isCollapse"
                    :unique-opened="true"
                    :collapse-transition="false"
                >
                    <!-- 一级菜单 -->
                    <el-submenu
                        :index="menu.path"
                        v-for="menu in menuList"
                        :key="menu.id"
                    >
                        <template slot="title">
                            <i :class="iconsObj[menu.id]"></i>
                            <span>{{ menusTitle(menu.authName) }}</span>
                        </template>
                        <!-- 二级菜单 -->
                        <el-menu-item
                            :index="'/' + item.path"
                            v-for="item in menu.children"
                            :key="item.id"
                            v-on:click="savePath(item.path)"
                        >
                            <i class="el-icon-position"></i>
                            <span>{{ menusTitle(item.authName) }}</span>
                        </el-menu-item>
                    </el-submenu>
                </el-menu>
            </el-aside>
            <!-- 右侧主内容 -->
            <el-main>
                <!-- 路由出口 -->
                <router-view></router-view>
            </el-main>
        </el-container>
    </el-container>
</template>

<script>
export default {
    name: 'HomeWrap',
    data() {
        return {
            // 控制左侧菜单是否折叠
            isCollapse: false,
            // 左侧菜单列表
            menuList: [],
            iconsObj: {
                // 用户管理图标
                125: 'iconfont icon-yonghu',
                // 权限管理图标
                103: 'iconfont icon-permissions',
                // 商品管理图标
                101: 'iconfont icon-shangpin',
                // 订单管理图标
                102: 'iconfont icon-dingdan',
                // 数据统计图标
                145: 'iconfont icon-shujutongji',
            },
            // 路由激活的地址
            activePath: '',
            // 控制主题
            value: '',
        }
    },
    methods: {
        // 退出
        loginOut() {
            // 清除本地存储
            localStorage.clear()
            // 提示退出成功信息
            this.$message({
                type: 'info',
                message: '退出成功',
            })
            // 跳转到登录页面
            this.$router.push('/login')
        },
        // 保存路由的激活状态
        savePath(activePath) {
            // 将被激活的路由地址保存在 sessionStorage 中
            window.sessionStorage.setItem('activePath', activePath)
        },
        // 点击菜单项时切换语言
        handleCommand(command) {
            this.$i18n.locale = command
        },
        // 菜单切换语言
        menusTitle(item) {
            if (this.$te('menus.' + item)) {
                return this.$t('menus.' + item)
            }
            return item
        },
    },
    async created() {
        // 请求左侧菜单接口
        const res = await this.$http.get('/menus')
        // 给 data 中的菜单列表赋值
        this.menuList = res.data.data
        // console.log(this.menuList)
        // 给 data 中的路由激活地址赋值
        this.activePath = window.sessionStorage.getItem('activePath')
    },
}
</script>

<style lang='less' scoped>
.el-container {
    height: 100%;
    .el-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background-color: #fdfdfdea;
        // 左部分
        .left {
            .logo {
                width: 50px;
                vertical-align: middle;
                margin-right: 10px;
            }
            .title {
                font-size: 22px;
                letter-spacing: 5px;
                font-family: '黑体';
                background-image: linear-gradient(
                    to left,
                    #147b96,
                    #e6d205 25%,
                    #147b96 50%,
                    #e6d205 75%,
                    #147b96
                );
                background-clip: text;
                background-size: 200% 100%;
                color: transparent;
                animation: text_animation 3s infinite linear;
            }
            @keyframes text_animation {
                0% {
                    background-position: 0 0;
                }
                100% {
                    background-position: -100% 0;
                }
            }
        }
        // 右部分
        .right {
            // 多语言下拉菜单
            .el-dropdown {
                margin-right: 20px;
                cursor: pointer;
            }
        }
    }
    .el-aside {
        background-color: #354758;
        .collapse {
            color: rgb(66, 185, 131);
            text-align: center;
            padding: 10px 20px;
            cursor: pointer;
            box-sizing: border-box;
        }
        .collapse:hover {
            color: rgb(61, 141, 105);
        }
        .el-menu {
            border: none;
            .iconfont {
                margin-right: 10px;
            }
        }
    }
    .el-main {
        background-color: #ebebeb;
    }
}
</style>
